<template>
	<div class="permission-tree">
		<el-scrollbar wrap-class="scrollbar-wrapper">
			<el-tree
				show-checkbox
				ref="tree"
				node-key="id"
				:default-expanded-keys="['0','00']"
				:data="treeData"
				@check="handleCheck"
			>
			</el-tree>
		</el-scrollbar>
	</div>
</template>

<script>
import _ from 'lodash'
import routes from '@/router/views/'
export default {
	name:'permission-tree',
	inheritAttrs:false,
	props:{
		value:{
			type:Array,
			default:() => []
		},
	},
	data() {
		return {
			
		};
	},
	computed: {
		treeData(){
			const rootRoutes = ['/approval','/form','/process','/document'],
			_routes = _.filter(routes, ({path}) => rootRoutes.includes(path)) || [],
			data = this.filterMenu(_routes);
			return this.recursive(data)
		}
	},
	methods: {
		handleCheck(data,attrs){
			const candidates = this.$refs.tree.getCheckedNodes(true)
			this.$emit('input',candidates)
		},
		clear(){
			this.$refs.tree.setCheckedKeys([])
		},
		recursive(routes,uid = ''){
			if (!(routes && routes.length)) return false
			let result = []
			routes.forEach(({meta,path,children},i) => {
				const id = uid + i,
				obj = {
					id,
					label:meta.menu,
					path,
				}
				if (children && children.length) {
					obj.children = this.recursive(children,id)
				}
				result.push(obj)
			})
			return result
		},
		//过滤没有设置menu的路由
		filterMenu(arr) {
			if (!(arr && arr.length)) return;
			return arr.filter(function fn(o) {
				if (o.children && o.children)
					return (o.children = o.children.filter(fn));
				return o.meta && o.meta.menu;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
	@import './style';
</style>
